<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<script src="../js/jquery-1.7.2.min.js" type="text/javascript"></script>
		<style type="text/css">
			.menu_item {
				cursor: pointer;
				border: 1px solid #AAA;
				margin: 2px;
				padding: 2px;
				width: 100px;
				height: 50px;
				text-align: center;
				display: inline-block;
				vertical-align: top;
			}
			.active_menu_item {
				background-color: yellow;
			}
		</style>
		<script type="text/javascript">
			var active_menu_item = null;
			function menuClick() {
				if (active_menu_item) active_menu_item.removeClass('active_menu_item');
				active_menu_item = $(this);
				active_menu_item.addClass('active_menu_item');
				var menu_id = active_menu_item.attr('id');
				switch(menu_id) {
					case 'menu_1': 
						$('#content').html('menu item 1 clicked');
						break;
					case 'menu_2': 
						$('#content').html('menu item 2 clicked');
						break;
					case 'menu_3': 
						$('#content').html('menu item 3 clicked');
						break;
					default: 
						$('#content').html('unknown menu item clicked');
				}
			}
			
			$(document).ready( function() {
				$('.menu_item').click( menuClick );
			});
		</script>
    </head>
    <body>
		<div class="menu_item" id="menu_1">menu 1</div>
		<div class="menu_item" id="menu_2">menu 2</div>
		<div class="menu_item" id="menu_3">menu 3</div>
		<div class="menu_item" id="menu_4">menu 4</div>
		<div class="menu_item" id="menu_5">menu 5</div>
		<div id="content">empty content</div>
	</body>
	
</html>